<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="区域访问权限"
    width="900px"
    @close="handleClose"
  >
    <el-form
      class="data-form"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="访问区域" prop="visitRegionId">
        <el-select
          class="search-select"
          v-model="form.visitRegionId"
          placeholder="请选择"
          multiple
        >
          <el-option
            v-for="(item, index) of keyAreaOptions"
            :key="index"
            :label="item.name"
            :value="item.pkid"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose(false)" :loading="loading">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { getKeyAreaList } from '@/api/manager/dataManage/keyAreaManage.js'
import { userUpdateBatch } from '@/api/manager/systemManage/user.js'
const defaultProps = {
  children: 'children',
  label: 'name',
}

const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const form = ref({ visitRegionId: [] })
const formRef = ref()
const rules = ref({
  visitRegionId: [
    { required: true, message: '请选择访问区域', trigger: 'blur' },
  ],
})
const handleClose = (isFlash) => {
  form.value = { visitRegionId: [] }
  formRef.value.clearValidate()
  dialogVisible.value = false
  emit('close', isFlash)
}
const keyAreaOptions = ref([])
const initKeyAreaOptions = async () => {
  const res = await getKeyAreaList({
    pageIndex: 1,
    pageSize: 9999,
  })
  keyAreaOptions.value = res.data.list
}
const userIds = ref('')
const loading = ref(false)
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true
      let params = {
        userIds: userIds.value,
        coreUserMetaInfo: {
          visitRegionId: '',
        },
      }
      // 处理访问区域
      params.coreUserMetaInfo.visitRegionId =
        form.value.visitRegionId.length > 0
          ? form.value.visitRegionId.join(',')
          : ''
      try {
        let res = await userUpdateBatch(params)
        if (res.success) {
          ElMessage.success('区域权限修改成功')
          handleClose(true)
        } else {
          ElMessage.error(res.message)
        }
        loading.value = false
      } catch (error) {
        console.log('error', error)
        loading.value = false
      }
    } else {
      ElMessage.warning('请正确录入信息')
    }
  })
}

watch(
  () => dialogVisible.value,
  () => {
    if (dialogVisible.value) {
      initKeyAreaOptions()
    }
  },
)
defineExpose({ dialogVisible, userIds })
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  margin-bottom: 10px;

  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 0px;
    left: 0px;
  }

  .el-button {
    margin-left: 10px;
  }
}
</style>
